<template>
  <el-drawer
    :wrapper-closable="false"
    title="添加关联用户"
    size="50%"
    append-to-body
    :modal-append-to-body="true"
    :visible.sync="innerValue"
    :close-on-click-modal="false"
    @open="onDrawerOpen"
    @closed="onDrawerClosed"
  >
    <div class="relative flex h-full flex-col space-y-[24px] p-[16px] pb-[70px] pt-[16px]">
      <div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
        <!-- 行表单 -->
        <el-row>
          <el-form ref="form" :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="用户账号：">
              <el-input
                v-model.trim="formInline.username"
                class="common-query-form-item-width-sm"
                placeholder="用户账号"
                size="small"
                clearable
                @clear="getDataList"
                @keydown.enter.native="getDataList"
                @input="input"
              ></el-input>
            </el-form-item>
            <el-form-item label="用户姓名：">
              <el-input
                v-model.trim="formInline.realName"
                class="common-query-form-item-width-sm"
                placeholder="用户姓名"
                size="small"
                clearable
                @clear="getDataList"
                @keydown.enter.native="getDataList"
                @input="input"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <t-button class="common-search-btn" type="primary" size="small" @click="getDataList">查 询</t-button>
            </el-form-item>
          </el-form>
        </el-row>
        <!-- 表格区域 -->
        <el-table
          ref="multipleTable"
          height="100%"
          :data="tableData"
          row-key="id"
          @selection-change="handleSelectionChange"
        >
          <el-table-column reserve-selection type="selection" width="40" center></el-table-column>
          <el-table-column type="index" label="序号" width="60" :index="columnIndex" />
          <el-table-column prop="username" label="用户账号"> </el-table-column>
          <el-table-column prop="realName" label="用户姓名"> </el-table-column>
          <template slot="empty">
            <t-empty-data />
          </template>
        </el-table>
        <el-pagination
          :current-page="pagination.page"
          :total="pagination.total"
          :page-size="pagination.size"
          :page-sizes="pagination.sizes"
          :layout="pagination.layout"
          :hide-on-single-page="false"
          class="pt-[20px]"
          background
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
        />
      </div>
      <footer class="common-drawer-footer">
        <t-button class="common-search-btn" type="primary" @click="onSubmit">添 加</t-button>
        <t-button class="common-search-btn" type="primary" @click="onSubmitAndContain">添加并继续</t-button>
        <t-button class="common-search-btn" type="default" plain @click="innerValue = false">取 消</t-button>
      </footer>
    </div>
  </el-drawer>
</template>

<script>
import paginationMixin from "./mixin/pagination";
import vModelMixin from "@/mixin/v-model";
import { systemUserList } from "@/api/user";
import { systemRoleAssignUser } from "@/api/role";

export default {
  name: "DetailDrawerAddRelation",
  mixins: [vModelMixin, paginationMixin],
  props: {
    id: {
      type: [String, Number],
      required: true,
      default: "",
    },
    code: {
      type: [String, Number],
      required: true,
      default: "",
    },
  },
  data() {
    return {
      // dialogVisible: true,
      formInline: {},
      tableData: [],
      currentPage1: 1,
      total: 0,
      multipleSelection: [],
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value;
      },
      set(newValue) {},
    },
  },

  methods: {
    input() {
      if (this.formInline.username || this.formInline.realName) {
        this.getDataList();
      }
    },
    async onSubmit() {
      if (!this.multipleSelection.length) {
        this.$message.error("请先勾选");
        return;
      }
      await this.submits();
      this.innerValue = false;
      this.onFinish();
    },
    async onSubmitAndContain() {
      if (!this.multipleSelection.length) {
        this.$message.error("请先勾选");
        return;
      }
      await this.submits();
      this.innerValue = false;
      this.onFinish();
    },
    async submits() {
      // eslint-disable-next-line no-async-promise-executor
      return new Promise(async (resolve) => {
        await systemRoleAssignUser({ roleCode: this.code, userIds: this.multipleSelection.map((item) => item.id) });
        resolve();
      });
    },
    onFinish() {
      this.$message.success("操作成功");
      this.getDataList();
      this.$emit("addFinish");
    },
    addRelation() {},
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange() {},
    getDataList(param) {
      systemUserList({
        ...this.getParams(param),
        username: this.formInline.username,
        realName: this.formInline.realName,
        roleId: this.id,
      }).then((res) => {
        this.tableData = res.content;
        this.pagination.total = res.totalElements;
      });
    },
    async onDrawerOpen() {
      this.getDataList();
      this.multipleSelection = [];

      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
        this.$refs.multipleTable.clearSelection();
      });
    },
    canale(row) {},
    onDrawerClosed() {
      this.formInline.username = "";
      this.formInline.realName = "";
    },
  },
};
</script>
